<template>
  <div>
    <router-view></router-view>

    <!-- 添加一个空的div -->
    <div class="empty"></div>
    <!-- tabbar区域 -->
    <van-tabbar v-if="isShowTabBar" v-model="active" @change="onChange" active-color="#dd1a21" inactive-color="#666" @tabbar-item-icon-size=101>
      <van-tabbar-item name="/"  icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item name="/category" icon="bookmark-o">分类</van-tabbar-item>
      <van-tabbar-item name="/worthshop" icon="debit-pay">值得买</van-tabbar-item>
      <van-tabbar-item name="/cart" icon="shopping-cart-o">购物车</van-tabbar-item>
      <van-tabbar-item name="/personal" icon="user-o">个人</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      active: '/',
      isShowTabBar: false
    }
  },
  methods: {
    onChange(){
      this.$router.push(this.active) 
    }
  },
  //监视路由变化 改变导航条 
  watch:{
    '$route':function(to,from){
      this.isShowTabBar = this.$route.meta.isShowTabBar
      
      this.active = to.path
    }
  },



}
</script>

<style lang="less" scoped>
.empty{
  height: 50px;
}
.van-tabbar--fixed{
  z-index: 999999;
}
</style>